<template>
  <div class="ansible-audit-container">

    <!-- 星空背景 -->
    <div class="starry-background">
      <div class="stars"></div>
      <div class="stars2"></div>
      <div class="stars3"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="audit-content">
      <!-- 页面标题 -->
      <div class="page-header glass-effect">
        <div class="header-content">
          <div class="title-section">
            <h1 class="page-title">
              <i class="fa fa-cogs"></i>
              Ansible日志审计
            </h1>
            <p class="page-subtitle">监控Ansible自动化任务执行记录和结果</p>
          </div>
          <div class="stats-section">
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.total_tasks || 0 }}</div>
              <div class="stat-label">总任务数</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.success_rate || 0 }}%</div>
              <div class="stat-label">成功率</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.running_tasks || 0 }}</div>
              <div class="stat-label">运行中任务</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 搜索和筛选 -->
      <div class="search-filters glass-effect">
        <el-form :model="searchForm" inline class="search-form">
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 350px;"
            />
          </el-form-item>

          <el-form-item label="执行用户">
            <el-select v-model="searchForm.user" placeholder="选择用户" clearable style="width: 140px;">
              <el-option
                v-for="user in users"
                :key="user.id"
                :label="user.username"
                :value="user.username"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="执行状态">
            <el-select v-model="searchForm.status" placeholder="选择状态" clearable style="width: 120px;">
              <el-option label="成功" value="success" />
              <el-option label="失败" value="failed" />
              <el-option label="运行中" value="running" />
              <el-option label="等待中" value="pending" />
              <el-option label="已取消" value="cancelled" />
            </el-select>
          </el-form-item>

          <el-form-item label="作业类型">
            <el-select v-model="searchForm.jobType" placeholder="选择类型" clearable style="width: 120px;">
              <el-option label="Ad-hoc" value="adhoc" />
              <el-option label="Playbook" value="playbook" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="searchLogs" class="glass-button search-button">
              <i class="fa fa-search"></i>
              搜索
            </el-button>
            <el-button @click="resetSearch" class="glass-button refresh-button">
              <i class="fa fa-refresh"></i>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 审计日志表格 -->
      <div class="audit-table-section glass-effect">
        <div class="section-title">
          <i class="fa fa-list"></i>
          执行记录
        </div>

        <el-table
          :data="auditLogs"
          style="width: 100%"
          v-loading="loading"
          @row-click="viewLogDetail"
          row-class-name="audit-row"
          class="audit-table"
        >
          <el-table-column prop="job_type" label="类型" width="90">
            <template #default="scope">
              <el-tag :type="getJobTypeColor(scope.row.job_type)" size="small">
                {{ getJobTypeText(scope.row.job_type) }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="执行用户" width="100">
            <template #default="scope">
              {{ scope.row.created_by?.username || scope.row.created_by || '-' }}
            </template>
          </el-table-column>

          <el-table-column label="执行内容" min-width="250">
            <template #default="scope">
              <div class="command-content">
                <span class="command-text">{{ getExecutionContent(scope.row) }}</span>
                <el-tooltip v-if="getExecutionContent(scope.row).length > 60" :content="getExecutionContent(scope.row)">
                  <i class="fa fa-info-circle"></i>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="目标主机" width="120">
            <template #default="scope">
              <el-tag size="small">{{ scope.row.inventory || scope.row.limit || 'all' }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="status" label="状态" width="90">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)" size="small">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="duration" label="耗时" width="70">
            <template #default="scope">
              {{ scope.row.duration || 0 }}s
            </template>
          </el-table-column>

          <el-table-column prop="start_time" label="开始时间" width="150">
            <template #default="scope">
              {{ formatTime(scope.row.start_time) }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="100" fixed="right">
            <template #default="scope">
              <el-button size="small" @click.stop="viewLogDetail(scope.row)" class="action-glass-button edit-action">
                <i class="fa fa-eye"></i>
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

      <!-- 日志详情对话框 -->
      <el-dialog
        v-model="showLogDetail"
        :title="`任务执行详情 - ${selectedLog?.name || '未知任务'}`"
        width="90%"
        top="5vh"
        class="log-detail-dialog"
        :close-on-click-modal="false"
      >
        <div v-if="selectedLog" class="log-detail">
          <!-- 基本信息 -->
          <div class="detail-section">
            <h4><i class="fa fa-info-circle"></i> 基本信息</h4>
            <div class="info-grid">
              <div class="info-item">
                <span class="label">执行ID:</span>
                <span class="value">{{ selectedLog.id }}</span>
              </div>
              <div class="info-item">
                <span class="label">作业类型:</span>
                <el-tag :type="getJobTypeColor(selectedLog.job_type)">
                  {{ getJobTypeText(selectedLog.job_type) }}
                </el-tag>
              </div>
              <div class="info-item">
                <span class="label">执行用户:</span>
                <span class="value">{{ selectedLog.created_by?.username || selectedLog.created_by || '-' }}</span>
              </div>
              <div class="info-item">
                <span class="label">目标主机:</span>
                <span class="value">{{ selectedLog.inventory || selectedLog.limit || 'all' }}</span>
              </div>
              <div class="info-item">
                <span class="label">开始时间:</span>
                <span class="value">{{ formatTime(selectedLog.start_time) }}</span>
              </div>
              <div class="info-item">
                <span class="label">结束时间:</span>
                <span class="value">{{ formatTime(selectedLog.end_time) }}</span>
              </div>
              <div class="info-item">
                <span class="label">执行时长:</span>
                <span class="value">{{ selectedLog.duration || 0 }}秒</span>
              </div>
              <div class="info-item">
                <span class="label">执行状态:</span>
                <el-tag :type="getStatusType(selectedLog.status)">
                  {{ getStatusText(selectedLog.status) }}
                </el-tag>
              </div>
            </div>
          </div>

          <!-- 执行命令 -->
          <div class="detail-section">
            <h4><i class="fa fa-terminal"></i> 执行命令</h4>
            <div class="content-box command-box">
              <pre>{{ getExecutionContent(selectedLog) }}</pre>
            </div>
          </div>

          <!-- 执行结果 -->
          <div class="detail-section">
            <h4><i class="fa fa-chart-bar"></i> 执行结果</h4>
            <div class="content-box result-box">
              <pre>{{ JSON.stringify(selectedLog.result, null, 2) || '暂无结果摘要' }}</pre>
            </div>
          </div>

          <!-- 执行日志 -->
          <div class="detail-section">
            <h4><i class="fa fa-file-text"></i> 执行日志</h4>
            <div class="content-box logs-box">
              <pre>{{ selectedLog.stdout || '暂无执行日志' }}</pre>
            </div>
          </div>

          <!-- 错误信息 -->
          <div v-if="selectedLog.stderr" class="detail-section">
            <h4><i class="fa fa-exclamation-triangle"></i> 错误信息</h4>
            <div class="content-box error-box">
              <pre>{{ selectedLog.stderr }}</pre>
            </div>
          </div>
        </div>
      </el-dialog>

      <!-- 返回按钮 -->
      <div class="action-section">
        <el-button @click="goToHistory" class="glass-button sync-button" size="large">
          <i class="fa fa-arrow-left"></i>
          返回历史记录
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式数据
const loading = ref(false)
const showLogDetail = ref(false)
const selectedLog = ref(null)
const auditLogs = ref([])
const users = ref([])

// 统计数据
const statistics = ref({
  total_tasks: 0,
  success_rate: 0,
  running_tasks: 0
})

const searchForm = reactive({
  dateRange: [],
  user: '',
  status: '',
  jobType: ''
})

const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0
})

// API调用
const ansibleAPI = {
  async getJobs(params = {}) {
    // 构建查询字符串
    const queryParams = new URLSearchParams()
    Object.keys(params).forEach(key => {
      if (params[key] !== undefined && params[key] !== null && params[key] !== '') {
        queryParams.append(key, params[key])
      }
    })

    const url = `/api/ansible/jobs/${queryParams.toString() ? '?' + queryParams.toString() : ''}`
    console.log('API URL:', url) // 调试日志
    const response = await fetch(url, {
      method: 'GET',
      headers: {
        'Authorization': `Token ${localStorage.getItem('token')}`,
        'Content-Type': 'application/json'
      }
    })
    if (!response.ok) throw new Error('获取任务列表失败')
    return response.json()
  },

  async getJobDetail(jobId) {
    const response = await fetch(`/api/ansible/jobs/${jobId}/`, {
      method: 'GET',
      headers: {
        'Authorization': `Token ${localStorage.getItem('token')}`,
        'Content-Type': 'application/json'
      }
    })
    if (!response.ok) throw new Error('获取任务详情失败')
    return response.json()
  }
}

// 构建搜索参数
const buildSearchParams = () => {
  const params = {}

  if (searchForm.dateRange && searchForm.dateRange.length === 2) {
    params.start_time = searchForm.dateRange[0]
    params.end_time = searchForm.dateRange[1]
  }

  if (searchForm.user) {
    params.created_by = searchForm.user
  }

  if (searchForm.status) {
    params.status = searchForm.status
  }

  if (searchForm.jobType) {
    params.job_type = searchForm.jobType
  }

  return params
}

// 方法
const loadAuditLogs = async () => {
  loading.value = true
  try {
    const response = await ansibleAPI.getJobs({
      page: pagination.currentPage,
      page_size: pagination.pageSize,
      ...buildSearchParams()
    })

    console.log('API Response:', response) // 调试日志

    auditLogs.value = response.results || []
    pagination.total = response.count || 0

    // 计算统计数据
    statistics.value.total_tasks = pagination.total
    const successfulTasks = auditLogs.value.filter(log => log.status === 'success').length
    statistics.value.success_rate = auditLogs.value.length > 0 ?
      Math.round((successfulTasks / auditLogs.value.length) * 100) : 0
    statistics.value.running_tasks = auditLogs.value.filter(log => log.status === 'running').length
  } catch (error) {
    ElMessage.error('加载审计日志失败')
  } finally {
    loading.value = false
  }
}

const loadUsers = async () => {
  try {
    const response = await fetch('/api/users/', {
      method: 'GET',
      headers: {
        'Authorization': `Token ${localStorage.getItem('token')}`,
        'Content-Type': 'application/json'
      }
    })
    if (!response.ok) throw new Error('获取用户列表失败')
    const data = await response.json()
    users.value = data.results || data
  } catch (error) {
    ElMessage.error('加载用户列表失败')
    // 使用默认用户列表作为备选
    users.value = [
      { id: 1, username: 'admin' },
      { id: 2, username: 'developer' },
      { id: 3, username: 'operator' }
    ]
  }
}

const searchLogs = () => {
  pagination.currentPage = 1
  loadAuditLogs()
}

const resetSearch = () => {
  Object.assign(searchForm, {
    dateRange: [],
    user: '',
    status: '',
    jobType: ''
  })
  pagination.currentPage = 1
  loadAuditLogs()
}

const viewLogDetail = async (log) => {
  try {
    // 获取详细的任务信息
    const detailResponse = await ansibleAPI.getJobDetail(log.id)
    selectedLog.value = detailResponse
    showLogDetail.value = true
  } catch (error) {
    ElMessage.error('获取任务详情失败')
    // 如果获取详情失败，使用原始数据
    selectedLog.value = log
    showLogDetail.value = true
  }
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
  pagination.currentPage = 1
  loadAuditLogs()
}

const handleCurrentChange = (page) => {
  pagination.currentPage = page
  loadAuditLogs()
}

// 状态处理函数
const getStatusType = (status) => {
  const statusMap = {
    'success': 'success',
    'failed': 'danger',
    'running': 'warning',
    'pending': 'info',
    'cancelled': 'info'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    'success': '成功',
    'failed': '失败',
    'running': '运行中',
    'pending': '等待中',
    'cancelled': '已取消'
  }
  return statusMap[status] || status
}

// 时间格式化
const formatTime = (timeStr) => {
  if (!timeStr) return '-'
  return new Date(timeStr).toLocaleString('zh-CN')
}

// 任务类型处理
const getJobTypeColor = (jobType) => {
  return jobType === 'adhoc' ? 'primary' : 'success'
}

const getJobTypeText = (jobType) => {
  const typeMap = {
    'adhoc': 'Ad-hoc',
    'playbook': 'Playbook'
  }
  return typeMap[jobType] || jobType
}

// 获取执行内容
const getExecutionContent = (row) => {
  if (row.job_type === 'adhoc') {
    return `${row.module_name || 'shell'}: ${row.module_args || row.name}`
  } else {
    return row.playbook?.name || row.name || '-'
  }
}



// 返回历史记录
const goToHistory = () => {
  router.push('/history')
}

// 初始化
onMounted(() => {
  loadAuditLogs()
  loadUsers()
})
</script>

<style lang="scss" scoped>
/* 主容器 */
.ansible-audit-container {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(20, 20, 40, 0.95) 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
  overflow-x: hidden;
}



/* 星空背景 */
.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.stars, .stars2, .stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: zoom 20s infinite linear;
}

.stars2 {
  background-image:
    radial-gradient(1px 1px at 40px 60px, #fff, transparent),
    radial-gradient(1px 1px at 120px 10px, rgba(255,255,255,0.7), transparent);
  background-repeat: repeat;
  background-size: 300px 200px;
  animation: zoom 40s infinite linear;
}

.stars3 {
  background-image:
    radial-gradient(1px 1px at 10px 10px, rgba(255,255,255,0.5), transparent);
  background-repeat: repeat;
  background-size: 400px 300px;
  animation: zoom 60s infinite linear;
}

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

/* 主要内容区域 */
.audit-content {
  position: relative;
  z-index: 10;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 玻璃效果基础样式 */
.glass-effect {
  background: rgba(164, 244, 186, 0.1);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* 页面标题区域 */
.page-header {
  margin-bottom: 30px;
  padding: 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.title-section {
  flex: 1;
}

.page-title {
  color: #00eaff;
  font-size: 2.5em;
  margin: 0 0 10px 0;
  text-shadow: 0 0 20px rgba(0, 234, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 15px;

  i {
    font-size: 0.8em;
  }
}

.page-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1em;
  margin: 0;
}

.stats-section {
  display: flex;
  gap: 20px;
}

.stat-card {
  padding: 20px;
  text-align: center;
  min-width: 120px;

  .stat-number {
    color: #00eaff;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 234, 255, 0.3);
  }

  .stat-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9em;
    margin-top: 5px;
  }
}

/* 开发中提示 */
.development-notice {
  margin-bottom: 30px;
  padding: 30px;
}

.notice-content {
  display: flex;
  align-items: center;
  gap: 25px;
}

.notice-icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: rgba(164, 244, 186, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  i {
    font-size: 32px;
    color: #a4f4ba;
    text-shadow: 0 0 10px rgba(164, 244, 186, 0.3);
  }
}

.notice-text {
  flex: 1;

  h3 {
    color: #a4f4ba;
    font-size: 1.5em;
    margin: 0 0 10px 0;
    text-shadow: 0 0 10px rgba(164, 244, 186, 0.3);
  }

  p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1em;
    margin: 0 0 20px 0;
  }
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.8);

  i {
    color: #a4f4ba;
    font-size: 14px;
  }

  span {
    font-size: 0.9em;
  }
}

/* 预览功能区域 */
.preview-section {
  margin-bottom: 30px;
}

.section-title {
  color: #00eaff;
  font-size: 1.3em;
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(0, 234, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.preview-card {
  padding: 25px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(164, 244, 186, 0.4);
  }
}

.preview-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: rgba(0, 234, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;

  i {
    font-size: 20px;
    color: #00eaff;
    text-shadow: 0 0 10px rgba(0, 234, 255, 0.3);
  }
}

.preview-content {
  h4 {
    color: #00eaff;
    font-size: 1.1em;
    margin: 0 0 10px 0;
    text-shadow: 0 0 5px rgba(0, 234, 255, 0.3);
  }

  p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
    line-height: 1.4;
    margin: 0;
  }
}

/* 操作区域 */
.action-section {
  text-align: center;
  margin-top: 40px;
}

/* 工具栏按钮样式 - 照抄Inventory页面 */
.glass-button {
  background: rgba(164, 244, 186, 0.15) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;

  &:hover {
    background: rgba(164, 244, 186, 0.25) !important;
    border-color: rgba(164, 244, 186, 0.5) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(164, 244, 186, 0.2) !important;
  }

  i {
    margin-right: 6px !important;
    color: #00eaff !important;
  }

  /* 搜索按钮 - 绿色 */
  &.search-button {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(34, 197, 94, 0.3) !important;
      border-color: rgba(34, 197, 94, 0.6) !important;
      box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3) !important;
    }

    i {
      color: #22c55e !important;
    }
  }

  /* 刷新按钮 - 紫色 */
  &.refresh-button {
    background: rgba(138, 43, 226, 0.2) !important;
    border-color: rgba(138, 43, 226, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(138, 43, 226, 0.3) !important;
      border-color: rgba(138, 43, 226, 0.6) !important;
      box-shadow: 0 4px 16px rgba(138, 43, 226, 0.3) !important;
    }

    i {
      color: #8a2be2 !important;
    }
  }

  /* 同步按钮 - 蓝色 */
  &.sync-button {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(59, 130, 246, 0.3) !important;
      border-color: rgba(59, 130, 246, 0.6) !important;
      box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3) !important;
    }

    i {
      color: #3b82f6 !important;
    }
  }
}

/* 操作按钮样式 - 照抄Inventory页面 */
.action-glass-button {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  transition: all 0.3s ease !important;
  min-width: 65px !important;

  &:hover {
    background: rgba(164, 244, 186, 0.2) !important;
    border-color: rgba(164, 244, 186, 0.5) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(164, 244, 186, 0.3) !important;
  }

  i {
    margin-right: 4px !important;
  }

  /* 编辑按钮 - 蓝色 */
  &.edit-action {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(59, 130, 246, 0.3) !important;
      border-color: rgba(59, 130, 246, 0.6) !important;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
    }
  }


}

/* 搜索表单样式 */
.search-form {
  .el-form-item {
    margin-right: 20px;
    margin-bottom: 16px;

    .el-form-item__label {
      color: #a4f4ba;
      font-weight: 500;
      min-width: 80px;
    }
  }

  .el-select {
    .el-input__inner {
      background: rgba(15, 20, 35, 0.8);
      border: 1px solid rgba(164, 244, 186, 0.3);
      color: #e0e6ed;
    }
  }

  .el-date-editor {
    .el-input__inner {
      background: rgba(15, 20, 35, 0.8);
      border: 1px solid rgba(164, 244, 186, 0.3);
      color: #e0e6ed;
    }
  }
}

/* 表格内容样式 */

.command-content {
  display: flex;
  align-items: center;
  gap: 8px;

  .command-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    color: #e0e6ed;
    background: rgba(164, 244, 186, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
  }

  .fa-info-circle {
    color: #a4f4ba;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;

    &:hover {
      opacity: 1;
    }
  }
}

/* 详情弹窗样式 */
.log-detail-dialog {
  .el-dialog {
    background: rgba(20, 25, 40, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(164, 244, 186, 0.3);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }

  .el-dialog__header {
    background: rgba(164, 244, 186, 0.1);
    border-bottom: 1px solid rgba(164, 244, 186, 0.2);
    padding: 20px;
    border-radius: 12px 12px 0 0;
  }

  .el-dialog__title {
    color: #a4f4ba;
    font-weight: 600;
    font-size: 18px;
  }

  .el-dialog__body {
    padding: 0;
    max-height: 70vh;
    overflow-y: auto;
  }
}

.log-detail {
  padding: 20px;
  color: #e0e6ed;
}

.detail-section {
  margin-bottom: 24px;

  h4 {
    color: #a4f4ba;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;

    i {
      font-size: 14px;
    }
  }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;

  .label {
    color: #8892b0;
    font-weight: 500;
    min-width: 80px;
  }

  .value {
    color: #e0e6ed;
    flex: 1;
  }
}

.content-box {
  background: rgba(15, 20, 35, 0.8);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 8px;
  padding: 16px;
  max-height: 300px;
  overflow-y: auto;

  pre {
    margin: 0;
    color: #e0e6ed;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

.command-box {
  pre {
    color: #a4f4ba;
  }
}

.result-box {
  pre {
    color: #64b5f6;
  }
}

.logs-box {
  pre {
    color: #e0e6ed;
  }
}

.error-box {
  border-color: rgba(244, 67, 54, 0.3);
  background: rgba(244, 67, 54, 0.1);

  pre {
    color: #ff8a80;
  }
}

/* 滚动条样式 */
.content-box::-webkit-scrollbar,
.el-dialog__body::-webkit-scrollbar {
  width: 6px;
}

.content-box::-webkit-scrollbar-track,
.el-dialog__body::-webkit-scrollbar-track {
  background: rgba(15, 20, 35, 0.5);
  border-radius: 3px;
}

.content-box::-webkit-scrollbar-thumb,
.el-dialog__body::-webkit-scrollbar-thumb {
  background: rgba(164, 244, 186, 0.3);
  border-radius: 3px;
}

.content-box::-webkit-scrollbar-thumb:hover,
.el-dialog__body::-webkit-scrollbar-thumb:hover {
  background: rgba(164, 244, 186, 0.5);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .header-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .stats-section {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .notice-content {
    flex-direction: column;
    text-align: center;
  }

  .preview-grid {
    grid-template-columns: 1fr;
  }

  .feature-list {
    grid-template-columns: 1fr;
  }
}
</style>
